<template>
	<div>
	<div v-show='zhuyemian'>
<!--		<h1>消耗品管理页面</h1>-->
		<div style="text-align: left">
			<el-button plain  @click="jinhuo" >进货</el-button>
			<el-button plain @click="chuhuo" >出货</el-button>
		</div>
		<el-form :inline="true" :model="form" ref="form" class="demo-form-inline" style="text-align: left;margin: 10px 0">
		<el-select    v-model="form.one" @change="chaxun">
			<el-option value="消耗品名称"></el-option>
			<el-option  value="消耗品类型"></el-option>
		</el-select>

		<el-select   v-model="form.two" >
			<el-option  v-for="list of tableData"  :value="list.goods_units_name"  v-show='mc'>{{list.goods_units_name}}</el-option>
<!--			<el-option v-for="list of Arr1"  :value="list"  v-show='lx'>{{list}}</el-option>-->
			<el-option v-for="list of Arr1"  :value="list"  v-show='lx'>{{list}}</el-option>
		</el-select>
		<el-button  @click="cx" type="primary">查询</el-button>
		<el-button  @click="cz" type="primary">重置</el-button>
		</el-form>
		<h1>消耗品管理页面</h1>
			<el-table
					:data="istrue?tableData:table"
					border
			style="width: 100%;text-align: center">
				<el-table-column prop="id" label="商品编号"
						width="100">
				</el-table-column>
				<el-table-column prop="goods_units_name" label="商品名"
						width="120">
				</el-table-column>
				<el-table-column prop="goods_classify_name" label="商品类型"
						width="118">
				</el-table-column>
				<el-table-column prop="danwei" label="单位"
						width="100">
				</el-table-column>
				<el-table-column prop="stock" label="库存"
						width="100">
				</el-table-column>
				<el-table-column prop="create_by" label="创建人"
						width="100">
				</el-table-column>
				<el-table-column prop="create_time" label="创建时间"
						width="180">
				</el-table-column>
				<el-table-column prop="update_by" label="修改人"
						width="100">
				</el-table-column>
				<el-table-column prop="update_time" label="修改时间"
						width="180">
				</el-table-column>
				<el-table-column prop="caozuo" label="操作"
						width="180">
					<template slot-scope="scope">
						<el-button size="mini" plain
							@click="edit(scope.$index, scope.row)">编辑</el-button>
						<el-button type="danger" size="mini"
							 @click="del(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		<div id="fenye">
			<el-pagination
					background
					layout="prev, pager, next"
					:total="currentData"
					:page-size="5"
					:pager-count="7"
					@current-change="changePage">
			</el-pagination>
		</div>
	</div>
<!--		==下面是编辑-->
		<el-dialog
				title="修改"
				:visible.sync="edit1"
				width="30%"
				center>
			<el-form :label-position="labelPosition" :model="xiugai" :rules="xiugairules" ref="ruleForm"  >
                <el-form-item label="消耗品名称" prop="goods_units_name">
                    <el-input type="text" :disabled="true" v-model="xiugai.id"></el-input>
                </el-form-item>
				<el-form-item label="消耗品名称" prop="goods_units_name">
					<el-input type="text" v-model="xiugai.goods_units_name"></el-input>
				</el-form-item>
				<el-form-item label="消耗品类型" prop="goods_classify_name">
					<el-select v-model="xiugai.goods_classify_name"  style="width: 205px">
                        <el-option v-for="list of Arr1"  :value="list"  >{{list}}</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="消耗品单位" prop="danwei">
					<el-input v-model="xiugai.danwei" ></el-input>
				</el-form-item>
				<el-form-item label="消耗品库存" prop="stock">
					<el-input v-model.number="xiugai.stock" ></el-input>
				</el-form-item>
			</el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="edit1 = false">取 消</el-button>
                <el-button type="primary" @click="quedingxiugai('ruleForm')">确定修改</el-button>
                </span>
		</el-dialog>
		<!--		====下面是添加=-->
		<div v-show="tianjia" id="tianjia" >
			<h1>进货页面</h1>
			<el-form :label-position="labelPosition" :model="ruleForm" :rules="rules2" ref="ruleForm"  >
				<el-form-item label="消耗品名称" prop="goods_units_name">
					<el-input  type="text" v-model="ruleForm.goods_units_name"></el-input>
				</el-form-item>
				<el-form-item label="消耗品类型" prop="goods_classify_name">
					<el-select v-model="ruleForm.goods_classify_name" placeholder="请选择" style="width: 205px">
                        <el-option v-for="list of Arr1"  :value="list"  >{{list}}</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="消耗品单位" prop="danwei">
					<el-input  type="text" v-model="ruleForm.danwei" ></el-input>
				</el-form-item>
				<el-form-item label="消耗品库存" prop="stock">
					<el-input  v-model.number="ruleForm.stock" ></el-input>
				</el-form-item>
			</el-form>
			<el-button plain @click="quxiao">取消添加</el-button>
			<el-button plain @click="tijiao">提交</el-button>
		</div>
<!--		============下面是出货-->
		<div v-show="chu" id="chu" >
			<h1>出货页面</h1>
			<el-form :label-position="labelPosition" :model="ruleForm1" :rules="rules1" ref="ruleForm"  >
				<el-form-item label="消耗品名称" prop="goods_units_name" label-width="100px">
					<el-input type="text" v-model="ruleForm1.goods_units_name"></el-input>
				</el-form-item>
				<el-form-item label="出货" prop="stock" label-width="100px" style="margin-top:20px">
					<el-input v-model.number="ruleForm1.stock" ></el-input>
				</el-form-item>
			</el-form>
			<el-button plain @click="quxiao">取消出货</el-button>
			<el-button plain @click="chuhuo1('ruleForm')">出货</el-button>
		</div>
	</div>
</template>

<script>
	import {mapActions} from 'vuex'

	export default {
		name:"Xhpgl",
		data(){
			return{
				form:{      //下拉列表
					one:'',
					two:''
				},
				labelPosition: 'right',
				ruleForm: {
					goods_units_name: '',
					goods_classify_name:'',
					danwei: '',
					stock: '',
				},
				ruleForm1:{
					goods_units_name: '',
					stock: '',
				},
				xiugai:{
					goods_units_name: '',
					goods_classify_name:'',
					danwei: '',
					stock: '',
				},
				rules2:{
                    goods_units_name: [
                        { required: true, message: '请输入消耗品名称', trigger: 'blur' },
                    ],
					goods_classify_name: [
						{ required: true, message: '请选择消耗品类型', trigger: 'change'  },
					],
					danwei:[
						{ required: true, message: '请输入单位', trigger: 'blur' },
					],
					stock:[
						{ required: true, message: '请输入库存', trigger: 'blur' },
						{ type: 'number', message: '库存必须为数字'}
					],
				},
				rules1:{
					goods_units_name: [
						{ required: true, message: '请输入消耗品名称', trigger: 'blur' },
					],
					stock: [
						{ required: true, message: '请输入出货数量', trigger: 'blur' },
						{ type: 'number', message: '出货数量必须为数字'}
					],
				},
				xiugairules:{
					goods_units_name: [
						{ required: true, message: '请输入消耗品名称', trigger: 'blur' },
					],
					goods_classify_name: [
						{ required: true, message: '请选择消耗品类型', trigger: 'change'  },
					],
					danwei: [
						{ required: true, message: '请输入单位', trigger: 'blur' },
					],
					stock: [
						{ required: true, message: '请输入库存', trigger: 'blur' },
						{ type: 'number', message: '库存必须为数字'}
					],
				},
				zhuyemian:true,
				tianjia:false,
				chu:false,
				mc:false,
				lx:false,
				edit1:false,
                istrue:true,
                table:[],
			}
		},
		created(){
			this.tableDataA(1).then(res=>{
			})
            this.DataCount().then(res => {

            })
		},
		computed:{
			tableData(){
				return this.$store.state.xhpgl.tableData
			},
			Arr1(){
				return this.$store.state.xhpgl.Arr1
			},
            currentData() {
                return this.$store.state.xhpgl.currentData
            },
		},
		methods:{
			...mapActions(['tableDataA','DataCount']),
			del(index,row) {          //删除
				console.log(row.goods_units_name)
				this.$confirm('是否删除改条数据?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					center: true
				}).then(() => {
					this.$axios({
						url:'/mgrsite/depotGoods/delete',
						method: 'post',
						data:{goods_units_name:row.goods_units_name}
					}).then(res=>{
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
                        this.istrue=true
                        this.tableDataA()
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});

			},
			edit(indx,row){
				// console.log(indx,row)
				this.edit1=!this.edit1
				// console.log(row.goods_units_name)
				// console.log(row.goods_classify_name)
				// console.log(row.danwei)
				// console.log(row.stock)
                this.xiugai.id=row.id
				this.xiugai.goods_units_name=row.goods_units_name
				this.xiugai.goods_classify_name=row.goods_classify_name
				this.xiugai.danwei=row.danwei
				this.xiugai.stock=row.stock
			},
            tijiao(){
                    if (this.ruleForm.goods_units_name!==''&&this.ruleForm.goods_classify_name!==''&&this.ruleForm.danwei!==''&&this.ruleForm.stock!=='') {
                        this.$confirm('是否添加？', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            this.$axios({
                                url: '/mgrsite/depotGoods/add',
                                method: 'post',
                                data: {
                                    goods_units_name: this.ruleForm.goods_units_name,
                                    goods_classify_name: this.ruleForm.goods_classify_name,
                                    danwei: this.ruleForm.danwei,
                                    stock: this.ruleForm.stock,
                                },
                            }).then(res => {
                                console.log(res)
                                if (res.data.code === 200) {
                                    this.$message({
                                        type: 'success',
                                        message: '添加成功!'
                                    });
                                    this.zhuyemian = !this.zhuyemian
                                    this.tianjia = !this.tianjia
                                    this.istrue=true
                                    this.tableDataA(1)
									this.ruleForm.goods_units_name=''
									this.ruleForm.goods_classify_name=''
									this.ruleForm.danwei=''
									this.ruleForm.stock=''
                                } else {
                                    this.$message.error('添加失败！');
                                }
                            })
                            this.$message({
                                type: 'success',
                                message: '添加成功!'
                            });
                        }).catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消添加'
                            });
                        });
                    } else {
                        this.$message.error('输入的值不能为空！');
                    }
			},
			cz(){
				this.istrue=true
				this.tableDataA()
				this.form.two=''
				this.form.one=''
			},
			chaxun(){
				if(this.form.one==='消耗品名称'){
					this.mc=true
					this.lx=false
				}
				else {
					this.lx=true
					this.mc=false
				}
			},
			cx(){
             let obj={}
             if(this.form.one==="消耗品名称"){
                 obj={goods_units_name:this.form.two,}
             }else if(this.form.one==="消耗品类型"){
                 obj={goods_classify_name:this.form.two,}
             }
             console.log(this.form.two)
                this.$axios({
                    url: '/mgrsite/depotGoods/selectDepotGoods',
                    method: 'post',
                    data:obj
                        // goods_classify_name: this.form.one,
                }).then(res => {
                    console.log(res)
                    if (res.data.code ===200) {
                        this.istrue=false
                        this.table=res.data.goods
                    } else {
                        this.$message.error('查找失败！');
                    }
                })
			},
			jinhuo(){
				this.zhuyemian=!this.zhuyemian
				this.tianjia=!this.tianjia
			},
			chuhuo(){
				this.zhuyemian=!this.zhuyemian
				this.chu=!this.chu
			},
			changePage(val){
                this.tableDataA(val)
			},
			chuhuo1(formName){
				// console.log(this.ruleForm1.goods_units_name)
				// console.log(this.ruleForm1.stock)
				// console.log(this.tableData)
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.zhuyemian = !this.zhuyemian
                        this.chu = !this.chu
                    } else {
                        this.$message.error('出货失败！');
                    }
                })
			},
			quedingxiugai(formName){           //改
                this.$refs[formName].validate((valid) => {
                    if (valid){
                        this.$confirm('是否修改？', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                        this.$axios({
                            url: '/mgrsite/depotGoods/update',
                            method: 'post',
                            data: {
                                id:this.xiugai.id,
                                goods_units_name: this.xiugai.goods_units_name,
                                goods_classify_name: this.xiugai.goods_classify_name,
                                danwei: this.xiugai.danwei,
                                stock: this.xiugai.stock,
                            }
                        }).then(res => {
                            console.log(res.data)
                            this.edit1 = !this.edit1
                            if (res.data.code ===200) {
                                this.istrue=true
                                this.tableDataA()
                                this.$message({
                                    type: 'success',
                                    message: '修改成功!'
                                });
                            } else {
                                this.$message.error('修改失败！');
                            }
                        })
                        });
                    } else {
                        this.$message.error('输入值有误！');
                    }
                });
            },
			quxiao(){       //取消添加货物
				this.zhuyemian=!this.zhuyemian
				this.tianjia=!this.tianjia
				this.chu=false
				this.tianjia=false
			},
		},
	}
</script>

<style scoped>
	/*===下面是表==*/
	h1{
		margin:10px auto;
		width: 250px;
	}
	.el-table thead{
		margin: auto;
	}

	/*====下面是分页*/
	#fenye{
		margin:10px auto;
		width: 300px;
		text-align: center;
	}

	/*=====下面是添加 */
	#tianjia{
		margin: auto;
	}
	.el-form-item{
		width: 300px;
		margin:11px auto;
	}
	.el-input {
		width: auto;
	}
	.el-input__inner:hover{
		cursor: pointer;
	}
</style>